<template>
  <div class="base-menu" :class="{ 'min-menu': isCollapse, 'no-menu': showMenu }">
    <div class="main-menu" v-if="!showMenu">
      <el-menu :default-active="activeIndex" :collapse="isCollapse" @select="selectMenu">
        <!-- 递归动态菜单 -->
        <menuItem :data="menus"></menuItem>
      </el-menu>
    </div>
  </div>
</template>
<script>
import { get, isEmpty } from 'lodash'
import { sessionStorage } from '@/deps/utils'
import menuItem from './menuItem.vue'
import { getMenu } from './menu'

export default {
  components: {
    menuItem
  },
  computed: {
    showMenu() {
      return isEmpty(this.menus)
    },
    isCollapse() {
      return this.$store.state.isCollapse
    }
  },
  data() {
    return {
      activeIndex: this.$route.name,
      menus: []
    }
  },
  methods: {
    selectMenu(name) {
      this.$router.push({path: name});
    },
    async changeMenu(menuid) {
      if (!menuid) {
        this.menus = []
        this.$bus.$emit('CHANGE_NO_MENU', true)
        return
      }
      const menu = await getMenu(menuid)
      this.menus = get(menu, 'nodes', [])
      this.$bus.$emit('CHANGE_NO_MENU', isEmpty(this.menus))
      this.$router.push({path: menu.menuUrl})
    }
  },
  created() {
    this.$bus.$on('CHANGE_MENU', this.changeMenu)
  },
  mounted() {
    this.$router.onReady(() => {
      const userData = sessionStorage('userData')
      if (!userData) return
      const menus = get(userData, 'entities[0].menus', [])
      const nowRoute = menus.find(i => i.menuUrl === this.$route.name)
      const csysMenuId = get(nowRoute, 'csysMenuId', '')
      this.changeMenu(csysMenuId)
    })
  }
}
</script>
<style lang="scss">
@keyframes show {
  from {
    width: 0;
  }

  to {
    width: 175px;
  }
}

@keyframes hide {
  from {
    width: 175px;
  }

  to {
    width: 0;
  }
}

@keyframes mini {
  from {
    width: 230px;
  }

  to {
    width: 64px;
  }
}

@keyframes max {
  from {
    width: 64px;
  }

  to {
    width: 230px;
  }
}
.slide-fade-enter-active {
  transition: all 0.25s linear;
}
.slide-fade-leave-active {
  transition: all 0.25s linear;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(50px);
  opacity: 0;
}
.base-menu {
  height: calc(100% - 40px);
  float: left;
  position: fixed;
  z-index: 2;
  background: var(--bg-color);
  width: 230px;
  animation: max 0.2s;
  .el-menu {
    background: var(--bg-color);
    .el-menu-item, .el-submenu__title {
      color: var(--text-color);
    }
    .el-submenu__title:hover, .el-menu-item:hover, .el-menu-item:focus {
      background: var(--color-primary-hover)  
    }
    .el-menu-item.is-active {
      color: var(--color-primary);
    }
  }
  .main-menu {
    color: var(--text-color);
    font-size: 14px;
    width: 100%;

    & > .menu-title {
      font-size: 18px;
      height: 56px;
      line-height: 56px;
      cursor: pointer;
      padding-left: 24px;
      white-space: nowrap;
      &:hover {
        background-color: var(--color-primary-hover);
        color: var(--color-primary);
      }
    }
  }
}

.min-menu.base-menu {
  animation: mini 0.2s;
  width: 64px;

  .menu-list span.m0 {
    font-size: 0;
  }
}
.base-menu.no-menu {
  width: 0px;
}
.router-link-active {
  background: var(--color-primary-hover) !important;
  border-left: 2px solid var(--color-primary) !important;

  &:hover {
    color: var(--text-color) !important;
  }
}
</style>
